<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    <meta charset="utf-8"/>
    <title>{% block title %}控制台|后台管理系统{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"/>
    <!-- basic styles -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"/>
    <link rel="stylesheet" href="{% static 'font-awesome/css/font-awesome.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/mystyles.css' %}"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css' %}"/>
    <![endif]-->

    <link rel="stylesheet" href="{% static 'Google_file/css/google-fonts_400_300.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/ace.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/ace-rtl.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/ace-skins.min.css' %}"/>

    <link rel="stylesheet" href="{% static 'lib/layui/css/layui.css' %}">
    {% block headjs %} {% endblock %}
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="{% static 'css/ace-ie.min.css' %}"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->

    <script src="{% static 'js/ace-extra.min.js' %}"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="{% static 'js/html5shiv.js' %}"></script>
    <script src="{% static 'js/respond.min.js' %}"></script>
    <![endif]-->
    {% block custom_css %}{% endblock %}

</head>
<body>
{% block header %}

    <div class="navbar navbar-default" id="navbar">
    <script type="text/javascript">
        try {
            ace.settings.check('navbar', 'fixed')
        } catch (e) {
        }
    </script>

    <div class="navbar-container" id="navbar-container">
    <div class="navbar-header pull-left">
        <a href="#" class="navbar-brand">
            <small>
                <i class="fa fa-cogs"></i>
                &nbsp;&nbsp;后台管理系统 (V1.0)

            </small>
        </a><!-- /.brand -->
    </div><!-- /.navbar-header -->

    <div class="navbar-header pull-right" role="navigation">

    <ul class="nav ace-nav">
    <li class="grey">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <i class="fa fa-tasks fa-1g"></i>
            <span class="badge badge-grey">4</span>
        </a>

        <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
                <i class="icon-ok"></i>
                还有4个任务完成
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
                        <span class="pull-left">软件更新</span>
                        <span class="pull-right">65%</span>
                    </div>

                    <div class="progress progress-mini ">
                        <div style="width:65%" class="progress-bar "></div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
                        <span class="pull-left">硬件更新</span>
                        <span class="pull-right">35%</span>
                    </div>

                    <div class="progress progress-mini ">
                        <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
                        <span class="pull-left">单元测试</span>
                        <span class="pull-right">15%</span>
                    </div>

                    <div class="progress progress-mini ">
                        <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
                        <span class="pull-left">错误修复</span>
                        <span class="pull-right">90%</span>
                    </div>

                    <div class="progress progress-mini progress-striped active">
                        <div style="width:90%" class="progress-bar progress-bar-success"></div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    查看任务详情
                    <i class="icon-arrow-right"></i>
                </a>
            </li>
        </ul>
    </li>

    <li class="purple">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <i class="fa fa-bell-o icon-animated-bell"></i>
            <span class="badge badge-important">8</span>
        </a>

        <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
                <i class="icon-warning-sign"></i>
                8条通知
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-pink icon-comment"></i>
												新闻评论
											</span>
                        <span class="pull-right badge badge-info">+12</span>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="btn btn-xs btn-primary icon-user"></i>
                    切换为编辑登录..
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>
												新订单
											</span>
                        <span class="pull-right badge badge-success">+8</span>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-info icon-twitter"></i>
												粉丝
											</span>
                        <span class="pull-right badge badge-info">+11</span>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    查看所有通知
                    <i class="icon-arrow-right"></i>
                </a>
            </li>
        </ul>
    </li>

    </li>
    {% if request.user.is_authenticated %}
        <li class="light-blue">
            <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                <img class="nav-user-photo" src="{{ MEDIA_URL }}{{ request.user.image }}" alt="Jack's Photo"/>
                <span class="user-info">
									<small>欢迎光临,</small>
									{{ request.user.username }}
								</span>

                <i class="fa fa-sort-desc"></i>
            </a>

            <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                <li>
                    <a href="" target="MainContent">
                        <i class="icon-cog"></i>
                        超管系统(暂不支持跳转)
                    </a>
                </li>

                <li>
                    <a href="{% url 'users:user_info' %}" target="MainContent">
                        <i class="icon-user"></i>
                        个人资料
                    </a>
                </li>

                <li class="divider"></li>

                <li>
                    <a href="{% url 'logout' %}">
                        <i class="icon-off"></i>
                        退出
                    </a>
                </li>
            </ul>
        </li>
    {% else %}
        <li class="light-blue">
            <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                <img class="nav-user-photo" src="/static/avatars/admin.jpg" alt="Jack's Photo"/>
                <span class="user-info">
                    <small>请登录</small>
                </span>

                <i class="fa fa-sort-desc"></i>
            </a>
        </li>

    {% endif %}
{% endblock %}
</ul><!-- /.ace-nav -->
</div><!-- /.navbar-header -->
</div><!-- /.container -->
</div>

{% block leftmenu %}
    <div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <div class="main-container-inner">
    <a class="menu-toggler" id="menu-toggler" href="#">
        <span class="menu-text"></span>
    </a>

    <div class="sidebar" id="sidebar">
        <script type="text/javascript">
            try {
                ace.settings.check('sidebar', 'fixed')
            } catch (e) {
            }
        </script>


        <ul class="nav nav-list">
            <li class="active">
                <a href="{% url 'console' %}" class="dropdown-toggle" target="MainContent">
                    <i class="fa fa fa-tachometer"></i>
                    <span class="menu-text"> 控制台 </span>
                </a>
            </li>
            <li>
                <a href="" class="dropdown-toggle" target="MainContent">
                    <i class="fa fa-users"></i>
                    <span class="menu-text"> 基础表格 </span>
                    <b class="fa  fa-angle-double-left"></b>
                </a>


                <ul class="submenu">

                    <li>
                        <a href="{% url 'tables' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            基础表格1
                        </a>
                    </li>

                    <li>
                        <a href="{% url 'tables2' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            基础表格2
                        </a>
                    </li>
                </ul>

            </li>

            <li>
                <a href="#" class="dropdown-toggle">
                    <i class="fa fa-line-chart"></i>
                    <span class="menu-text"> 表单相关 </span>

                    <b class="fa fa-angle-double-left"></b>
                </a>


                <ul class="submenu">
                    <li>
                        <a href="{% url 'tabs' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            普通表单
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'wysiwyg' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            富文本编辑器
                        </a>
                    </li>

                    <li>
                        <a href="{% url 'console' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            文件上传
                        </a>
                    </li>
                </ul>
            </li>

            <li>
                <a href="{% url 'thecharts' %}" target="MainContent" class="dropdown-toggle">
                    <i class="fa fa-object-ungroup"></i>
                    <span class="menu-text"> chart图表 </span>

                    <b class="fa fa-angle-double-left"></b>
                </a>

            </li>


            <li>
                <a href="#" class="dropdown-toggle">
                    <i class="fa fa-life-ring"></i>
                    <span class="menu-text"> 错误页面 </span>

                    <b class="fa fa-angle-double-left"></b>
                </a>
                <ul class="submenu">
                    <li>
                        <a href="{% url 'error404' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            404错误页面
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'error500' %}" target="MainContent">
                            <i class="fa fa-angle-right"></i>
                            500错误页面
                        </a>
                    </li>
                </ul>

            </li>

        </ul><!-- /.nav-list -->
        <div class="sidebar-collapse" id="sidebar-collapse">
            <i class="fa icon-double-angle-left" data-icon1="fa icon-double-angle-left"
               data-icon2="icon-double-angle-right"></i>
        </div>

        <script type="text/javascript">
            try {
                ace.settings.check('sidebar', 'collapsed')
            } catch (e) {
            }
        </script>
    </div>
{% endblock %}
{% block rightcontent %}
    {#    <div class="main-content" style="height:90% !important;">#}
    {#        <div class="page-content" style="padding: 8px 20px 0px;">#}
    {#            <div class="row" style="height: 100%">#}
    {#                <iframe name="MainContent" id="Mainiframe" width="100%" height="100px" src="{% url 'console' %}"#}
    {#                        border="0" frameborder="0"></iframe>#}
    {#            </div><!-- /.row -->#}
    {#        </div><!-- /.page-content -->#}
    {#    </div><!-- /.main-content -->#}
    <div class="page-content">
        <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
            <ul class="layui-tab-title">
                <li class="home"><i class="layui-icon">&#xe68e;</i>我的桌面</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe src='{% url 'console' %}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="page-content-bg"></div>

{% endblock %}
<!-- 版权区 -->
<div class="footer">
    <div class="copyright">
        <p>
            Copyright © 2017 版权所有 广州xx信息科技有限公司 All Rights Reserved　技术支持 xx网络 <a
                href="http://www.miitbeian.gov.cn">粤ICP备15103825号</a>
        </p>
    </div>
</div>
<!-- 版权区 end-->
<div class="ace-settings-container" id="ace-settings-container">
    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
        <i class="icon-cog bigger-150"></i>
    </div>

    <div class="ace-settings-box" id="ace-settings-box">
        <div>
            <div class="pull-left">
                <select id="skin-colorpicker" class="hide">
                    <option data-skin="default" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                </select>
            </div>
            <span>&nbsp; 选择皮肤</span>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar"/>
            <label class="lbl" for="ace-settings-navbar"> 固定导航条</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar"/>
            <label class="lbl" for="ace-settings-sidebar"> 固定滑动条</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs"/>
            <label class="lbl" for="ace-settings-breadcrumbs">固定面包屑</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl"/>
            <label class="lbl" for="ace-settings-rtl">切换到左边</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container"/>
            <label class="lbl" for="ace-settings-add-container">
                切换窄屏
                <b></b>
            </label>
        </div>
    </div>
</div><!-- /#ace-settings-container -->
</div><!-- /.main-container-inner -->
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->

<script src="{% static 'Google_file/js/jquery.min.js' %}"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">
    window.jQuery || document.write("<script src='{% static 'js/jquery-2.0.3.min.js'%}'>" + "<" + "script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='{% static 'js/jquery-1.10.2.min.js'%}'>" + "<" + "script>");
</script>
<![endif]-->

<script type="text/javascript">
    if ("ontouchend" in document) document.write("<script src='{% static 'js/jquery.mobile.custom.min.js'%}'>" + "<" + "script>");
</script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/typeahead-bs2.min.js' %}"></script>

<!-- page specific plugin scripts -->

<!--[if lte IE 8]>
<script src="{% static 'js/excanvas.min.js'%}"></script>
<![endif]-->

<script src="{% static 'js/jquery-ui-1.10.3.custom.min.js' %}"></script>
<script src="{% static 'js/jquery.ui.touch-punch.min.js' %}"></script>
<script src="{% static 'js/jquery.slimscroll.min.js' %}"></script>
<script src="{% static 'js/jquery.easy-pie-chart.min.js' %}"></script>
<script src="{% static 'js/jquery.sparkline.min.js' %}"></script>
<script src="{% static 'js/flot/jquery.flot.min.js' %}"></script>
<script src="{% static 'js/flot/jquery.flot.pie.min.js' %}"></script>
<script src="{% static 'js/flot/jquery.flot.resize.min.js' %}"></script>

<!-- ace scripts -->

<script src="{% static 'js/ace-elements.min.js' %}"></script>
<script src="{% static 'js/ace.min.js' %}"></script>

<!-- inline scripts related to this page -->

<script type="text/javascript">
    jQuery(function ($) {
        var H = $(window).height();
        var iframe_H = H - $('#breadcrumbs').height() - $('#navbar').height()
        $('#Mainiframe').height(iframe_H - 50)
        $('.easy-pie-chart.percentage').each(function () {
            var $box = $(this).closest('.infobox');
            var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
            var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
            var size = parseInt($(this).data('size')) || 50;
            $(this).easyPieChart({
                barColor: barColor,
                trackColor: trackColor,
                scaleColor: false,
                lineCap: 'butt',
                lineWidth: parseInt(size / 10),
                animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000,
                size: size
            });
        })

        $('.sparkline').each(function () {
            var $box = $(this).closest('.infobox');
            var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
            $(this).sparkline('html', {
                tagValuesAttribute: 'data-values',
                type: 'bar',
                barColor: barColor,
                chartRangeMin: $(this).data('min') || 0
            });
        });


        var placeholder = $('#piechart-placeholder').css({'width': '90%', 'min-height': '150px'});
        var data = [
            {label: "social networks", data: 38.7, color: "#68BC31"},
            {label: "search engines", data: 24.5, color: "#2091CF"},
            {label: "ad campaigns", data: 8.2, color: "#AF4E96"},
            {label: "direct traffic", data: 18.6, color: "#DA5430"},
            {label: "other", data: 10, color: "#FEE074"}
        ]

        function drawPieChart(placeholder, data, position) {
            $.plot(placeholder, data, {
                series: {
                    pie: {
                        show: true,
                        tilt: 0.8,
                        highlight: {
                            opacity: 0.25
                        },
                        stroke: {
                            color: '#fff',
                            width: 2
                        },
                        startAngle: 2
                    }
                },
                legend: {
                    show: true,
                    position: position || "ne",
                    labelBoxBorderColor: null,
                    margin: [-30, 15]
                }
                ,
                grid: {
                    hoverable: true,
                    clickable: true
                }
            })
        }

        drawPieChart(placeholder, data);

        /**
         we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
         so that's not needed actually.
         */
        placeholder.data('chart', data);
        placeholder.data('draw', drawPieChart);


        var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
        var previousPoint = null;

        placeholder.on('plothover', function (event, pos, item) {
            if (item) {
                if (previousPoint != item.seriesIndex) {
                    previousPoint = item.seriesIndex;
                    var tip = item.series['label'] + " : " + item.series['percent'] + '%';
                    $tooltip.show().children(0).text(tip);
                }
                $tooltip.css({top: pos.pageY + 10, left: pos.pageX + 10});
            } else {
                $tooltip.hide();
                previousPoint = null;
            }

        });


        var d1 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.5) {
            d1.push([i, Math.sin(i)]);
        }

        var d2 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.5) {
            d2.push([i, Math.cos(i)]);
        }

        var d3 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.2) {
            d3.push([i, Math.tan(i)]);
        }


        var sales_charts = $('#sales-charts').css({'width': '100%', 'height': '220px'});
        $.plot("#sales-charts", [
            {label: "Domains", data: d1},
            {label: "Hosting", data: d2},
            {label: "Services", data: d3}
        ], {
            hoverable: true,
            shadowSize: 0,
            series: {
                lines: {show: true},
                points: {show: true}
            },
            xaxis: {
                tickLength: 0
            },
            yaxis: {
                ticks: 10,
                min: -2,
                max: 2,
                tickDecimals: 3
            },
            grid: {
                backgroundColor: {colors: ["#fff", "#fff"]},
                borderWidth: 1,
                borderColor: '#555'
            }
        });


        $('#recent-box [data-rel="tooltip"]').tooltip({placement: tooltip_placement});

        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('.tab-content')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }


        $('.dialogs,.comments').slimScroll({
            height: '300px'
        });


        //Android's default browser somehow is confused when tapping on label which will lead to dragging the task
        //so disable dragging when clicking on label
        var agent = navigator.userAgent.toLowerCase();
        if ("ontouchstart" in document && /applewebkit/.test(agent) && /android/.test(agent))
            $('#tasks').on('touchstart', function (e) {
                var li = $(e.target).closest('#tasks li');
                if (li.length == 0) return;
                var label = li.find('label.inline').get(0);
                if (label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation();
            });

        $('#tasks').sortable({
                opacity: 0.8,
                revert: true,
                forceHelperSize: true,
                placeholder: 'draggable-placeholder',
                forcePlaceholderSize: true,
                tolerance: 'pointer',
                stop: function (event, ui) {//just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
                    $(ui.item).css('z-index', 'auto');
                }
            }
        );
        $('#tasks').disableSelection();
        $('#tasks input:checkbox').removeAttr('checked').on('click', function () {
            if (this.checked) $(this).closest('li').addClass('selected');
            else $(this).closest('li').removeClass('selected');
        });


    })
</script>
{% block custom_js %}{% endblock %}

</body>
</html>

